<template>
<v-container
  class="select-board"
>
  <v-app-bar
    app
    color="#ffaf64"
    style="border-radius: 30px; "
    src="../../static/img/UI/redHeader.png"
  >
    <v-spacer></v-spacer>
    <span>{{ $store.state.Time }}</span>
    <v-spacer></v-spacer>
    <v-dialog
      transition="dialog-bottom-transition"
      max-width="600"
    >
      <template v-slot:activator="{on, attrs}">
        <v-btn
          elevation="2"
          v-bind="attrs"
          v-on="on"
          class="menu-button"
          v-show="!$store.state.IsLogin"
        >登录/注册</v-btn>
      </template>
      <template v-slot:default="dialog">
        <v-card>
          <v-toolbar
            color="primary"
            dark
            src="../../static/img/UI/redHeader.png"
          >登录/注册</v-toolbar>
          <v-card
            class="login-regis"
          >
            <v-alert
              v-show="$store.state.LoginTipShow"
              v-model="alert"
              border="left"
              close-text="Close Alert"
              color="deep-purple accent-4"
              dark
              dismissible
            >
              {{ $store.state.LoginTip }}
            </v-alert>
            <login-message v-show="messageSeen"></login-message>
            <LoginMenu @click.native="registFunction" v-show="messageSeen" hintSentence="若要注册,请点击以下按钮" buttonClass="regist-button" buttonId="regist-button" buttonName="注册"></LoginMenu>
            <RegistMessage v-show="registSeen"></RegistMessage>
            <LoginMenu @click.native="returnFunction" v-show="registSeen" hintSentence="若要返回登录,请点击以下按钮" buttonClass="return-button" buttonId="return-button" buttonName="返回登录"></LoginMenu>
          </v-card>
          <v-card-actions class="justify-end">
            <v-btn
              text
              @click="dialog.value = false"
            >关闭</v-btn>
          </v-card-actions>
        </v-card>
      </template>
    </v-dialog>
    <span v-show="$store.state.IsLogin">欢迎您，{{ $store.state.UserName }}</span>
    <v-spacer v-show="$store.state.IsLogin"></v-spacer>
  </v-app-bar>

  <audio ref="background_audio" :src="SelectedMusic"></audio>

  <v-sheet
    class="music-sheet mx-auto"
    style="animation: slideInRight; animation-duration: 1s; background: rgba(0, 0, 0, 0)"
    elevation="0"
    max-height="1000"
  >
    <v-slide-group
      v-model="model"
      class="pa-4"
      center-active
      show-arrows
    >
      <v-slide-item
        v-for="(value, key, idx) in this.$store.state.MusicList"
        :key="idx"
      >
        <v-card
            :color="CardsShow[idx] ? 'primary' : 'grey lighten-1'"
            class="music-card ma-4"
            hover
            :height="CardsShow[idx] ? '380px' : '300px'"
            :width="CardsShow[idx] ? '380px' : '80px'"
            :style="{'animation': 'slideInRight', 'animation-duration': 2 + 's', 'animation-delay': idx * 0.1 + 's'}"
            @click="CardsClicked(idx, key)"
          >
            <v-row
              class="fill-height"
              align="center"
              justify="center"
            >
              {{ key }}
            </v-row>
          </v-card>
      </v-slide-item>
    </v-slide-group>
    <v-expand-transition>
      <v-sheet
        v-if="ExpandShow"
        class="ExpandMenu"
        height="150"
        tile
      >
        <v-row
          class="fill-height"
          align="center"
          justify="center"
        >
          <h3>
            Selected {{ SelectedMusicName }}
          </h3>
        </v-row>
      </v-sheet>
    </v-expand-transition>
  </v-sheet>

  <v-container
    class="bottom-bar"
  >
    <button
      class="start-button"
      @click="StartGame"
    ></button>
  </v-container>
</v-container>
</template>

<script>
import 'animate.css'
import LoginMessage from '../components/LoginMessage.vue'
import LoginMenu from '../components/LoginMenu.vue'
import RegistMessage from '../components/RegistBox.vue'
export default {
  name: 'SelectBoard',
  data () {
    return {
      model: null,
      // 展开栏
      ExpandShow: false,

      // 卡片
      CardsShow: [],

      // 选择的音乐
      SelectedMusicName: 'star',
      SelectedMusic: this.$store.state.MusicList.star,

      // 底部导航栏功能
      BottomFunctions: ['开始游戏'],

      messageSeen: true,
      registSeen: false
    }
  },
  components: {
    LoginMessage,
    LoginMenu,
    RegistMessage
    // FunctionButtons
  },
  mounted () {
    for (let i = 0; i < this.$store.state.MusicNumber; i++) {
      this.CardsShow.push(false)
    }
    setInterval(this.changeTime, 1000)
  },
  methods: {
    changeTime: function () {
      const d = new Date()
      let weekday = ''
      switch (d.getDay()) {
        case 0:
          weekday = '星期一'
          break
        case 1:
          weekday = '星期二'
          break
        case 2:
          weekday = '星期三'
          break
        case 3:
          weekday = '星期四'
          break
        case 4:
          weekday = '星期五'
          break
        case 5:
          weekday = '星期六'
          break
        case 6:
          weekday = '星期日'
          break
      }
      let hour = d.getHours()
      if (hour < 10) hour = '0' + hour.toString()
      let minute = d.getMinutes()
      if (minute < 10) minute = '0' + minute.toString()
      let second = d.getSeconds()
      if (second < 10) second = '0' + second.toString()
      this.$store.state.Time = d.getFullYear().toString() + '/' +
        (d.getMonth() + 1).toString() + '/' +
        d.getDate().toString() + ' ' +
        weekday + ' ' +
        hour + ':' +
        minute.toString() + ':' +
        second.toString()
    },
    CardsClicked: function (idx, key) {
      this.SelectedMusicName = key

      for (let i = 0; i < this.$store.state.MusicNumber; i++) {
        if (i !== idx) {
          this.CardsShow[i] = false
        }
      }

      if (this.CardsShow[idx] === false) {
        this.CardsShow[idx] = true
        this.ExpandShow = true
      } else {
        this.CardsShow[idx] = false
        this.ExpandShow = false
      }
      this.SelectedMusic = this.$store.state.MusicList[this.SelectedMusicName]
      this.$store.state.PlayingMusic = this.SelectedMusic
      this.$store.state.PlayingTimeList = this.$store.state.TimeList[this.SelectedMusicName]
      console.log(this.$store.state.PlayingTimeList)
      this.$refs.background_audio.load()
      this.$refs.background_audio.play()
    },
    StartGame: function () {
      // this.$store.state.PlayingMusic = this.SelectedMusic
      // this.$store.state.PlayingTimeList = this.$store.state.TimeList[this.SelectedMusicName]
      this.$router.push('/play')
    },
    // Signup: function () {
    //   this.$router.push('/login')
    // },
    registFunction: function () {
      this.messageSeen = false
      this.registSeen = true
    },
    returnFunction: function () {
      this.messageSeen = true
      this.registSeen = false
    }
  }
}
</script>

<style scoped>
.music-sheet {
  margin-top: 125px;
  height: 400px;
}
.music-card {
  background-image: url("../../static/img/UI/CardBack.png");
  background-size: 100% 100%;
}
.login-regis {
  background-image: url("../../static/img/UI/loginBack.png");
  background-size: 100% 100%;
}
.menu-button {
  height: 40px;
  width: 100px;
  margin-right: 20px;
  background-image: url("../../static/img/UI/Button.png");
  color: azure;
  font-family: '华文楷体', sans-serif;
}
.menu-button:hover {
  height: 45px;
  width: 112px;
}
.bottom-bar {
  position: fixed;
  margin-top: 20%;
  margin-left: -2%;
  height: 20%;
}
.start-button {
  height: 100px;
  width: 200px;
  position: fixed;
  margin-top: -10%;
  margin-left: 73%;
  background-image: url("../../static/img/UI/StartButton.png");
  background-size: 100% 100%;
  animation: fadeInRight;
  animation-duration: 2s;
}
.start-button:hover {
  margin-top: -11%;
  margin-left: 72%;
  height: 110px;
  width: 210px;
}
span {
  color: azure;
  font-family: '华文楷体', sans-serif;
}
</style>
